<template>
<div>
     <div class="newproduct"  v-for='(item,index) of datatitle'  :key='index'>
                 <h3>--{{item}}--</h3>
                   <img class="imgTitle" src="static/images/shouji-4.png" alt=""/>
                 <ul>
                     <li>
                         <img src="static/images/shouji-5.png" alt=""/>
                     <p><a href='#'>手机1</a></p>
                     </li>
                     <li>
                          <img src="static/images/shouji-5.png" alt=""/>
                     <p><a href='#'>手机1</a></p>
                     
                     </li>
                     <li> <img src="static/images/shouji-5.png" alt=""/>
                     <p><a href='#'>手机1</a></p>
                     </li>
                     <li><img src="static/images/shouji-5.png" alt=""/>
                     <p><a href='#'>手机1</a></p>
                     </li>
                 </ul>
                   
                  <ul>
                     <li><img src="static/images/shouji-5.png" alt=""/>
                     <p><a href='#'>手机1</a></p>
                     </li>
                     <li> <img src="static/images/shouji-5.png" alt=""/>
                     <p><a href='#'>手机1</a></p>
                     </li>
                     <li> <img src="static/images/shouji-5.png" alt=""/>
                     <p><a href='#'>手机1</a></p>
                     </li>
                     <li><img src="static/images/shouji-5.png" alt=""/>
                     <p><a href='#'>手机1</a></p>
                     </li>
                 </ul>
              <hr/>
                 </div>
</div>
   
</template>

<script>
export default {
    props:{
        datatitle:{
            type:Array
        },
      
    },
    created(){
        console.log(this.datatitle)
    },
    watch:{
     
    }

}
</script>

<style lang='scss' scoped>
$appwidth:375;


@function pxtovw($p){
    @return (100/$appwidth*$p) * 1vw;
}


.newproduct{
    box-sizing: border-box;
        margin-top:pxtovw(20); 
        width: 100%;
        height: pxtovw(500);
        h3{
            color:#666;
            margin: pxtovw(20);
        }
        ul{
            display: flex;
            li{
                width: 39%;
                height: pxtovw(140);
                // background: pink;
                img{
                   width: 100%;
                  height: pxtovw(80); 
                }
                p{
                    a{
                        text-decoration: none;
                        color: #333;
                    }
                }
            }
           
        }
        .imgTitle{
                width: 70%;
                height: pxtovw(150);
                margin: pxtovw(10);
                
            }
    }
</style>
